<template>
	<view class="couponList u-skeleton">
		<Skeleton el-color="#efefef" bg-color="#fff" :loading="loading && isFirstComeIn" :animation="true" />

		<view class="signBox flex-items flex-sp-between mar-top-30 mar" @click="goToSign">
			<view class="signLeft flex-items flex-sp-between">
				<view class="signText fs28 font-color-F3641E">兑换通券凭证</view>
			</view>
			<view class="u-arrow u-arrow-right"></view>
		</view>

		<template v-if="couponList.length>0">
			<view class="couponItem u-skeleton-rect flex-column-plus" v-for="item of couponList" :key="item.couponId">
				<view class="topInfo flex-items flex-sp-between">
					<view @click="goProductList(item)">
						<view class="couponTit fs36 font-color-FFF">{{item.couponName}}</view>
						<view class="couponDate">可兑换{{ item.couponValue }}通券</view>
					</view>
					<view class="exchangeBtnBox flex-column flex-end">
						<view class="exchangeBtn fs24 font-color-FFF" v-if="item.state === 0">已兑换
						</view>
						<wx-send-coupon v-else @success="success" :couponList="[item]">
							<view @click="goProductList(item)" class="exchangeBtn fs24 font-color-FFF">{{ '复制兑换' }}
							</view>
						</wx-send-coupon>
					</view>
				</view>
				<view @click="goProductList(item)" class="couponType fs24 font-color-FFF">{{ item.checkCode }}
				</view>
			</view>
			<!-- 触底 -->
			<view class="reachBottom" v-if="topLeft > 400 && couponList.length>0">
				<image class="reach-icon" :src="`${VUE_APP_STATIC_URL}static/img/reachBottom.png`" mode="widthFix">
				</image>
				<text class="reach-text">这里到底了哦~~</text>
			</view>
		</template>
		<Empty :show="couponList.length<=0" />
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		nextTick
	} from "vue";
	import {
		onLoad,
		onReachBottom,
		onPageScroll
	} from "@dcloudio/uni-app";
	import Skeleton from "../../components/Skeleton";
	import Empty from "../../components/Empty";
	import WxSendCoupon from "../../components/wx/wxSendCoupon";
	import {
		request
	} from "../../utils/request"
	import API from "@/config/api";
	import {
		VUE_APP_STATIC_URL
	} from "@/config/api";

	const $goBqCenter = inject('$goBqCenter')

	const loading = ref(false)
	const isFirstComeIn = ref(true)
	const couponList = ref([{}, {}, {}, {}, {}, {}])
	const page = ref(1)
	const pageSize = ref(20)
	const loadingType = ref(0)
	const topLeft = ref(0)

	onLoad(() => {
		getCouponList()
	})

	onReachBottom(() => {
		if (loadingType.value == 1) {
			uni.stopPullDownRefresh()
		} else {
			page.value = page.value + 1
			getCouponList()
		}
	})

	onPageScroll((e) => {
		topLeft.value = e.scrollTop
	})

	// 签到
	const goToSign = () => {
		uni.navigateTo({
			url: '../../pages_category_page2/compisteCoupon/exchange'
		})
	}
	/**
	 * 获取券列表
	 * @returns {Promise<void>}
	 */
	const getCouponList = async () => {
		loading.value = true
		try {
			const res = await request(API.compositeCouponList, {
				pageNum: page.value,
				pageSize: pageSize.value,
			}, 'POST')
			if (res.data.list.length === 0) {
				loadingType.value = 1
			} else {
				couponList.value = couponList.value.concat(res.data.list)
				// this.$forceUpdate()
			}
			couponList.value = couponList.value.filter(item => JSON.stringify(item) !== '{}')
			loading.value = false
			isFirstComeIn.value = false
		} catch (err) {
			throw Error(err)
		}
	}

	/**
	 * 跳转到可用商品列表
	 * @param item
	 */
	const goProductList = (item) => {
		let that = this
		uni.setClipboardData({
			data: item.checkCode,
			success: function() {
				uni.showToast({
					title: '复制成功,跳转到数版中心兑换',
					icon: 'success',
					duration: 2000
				});
				$goBqCenter()
			},
			fail: function(err) {},
		})
	}
</script>

<style lang="scss" scoped>
	@import "../../style/images";

	page {
		background: #F8F8F8 !important;

		.couponList {
			padding: 0 30rpx 40upx;
			margin-top: 30rpx;

			.couponItem {
				background: linear-gradient(0deg, #FE7825, #FE7825),
					linear-gradient(280.33deg, rgba(230, 69, 0, 0.81) -74.81%, rgba(255, 92, 0, 0.79) -7.35%, #FF9921 110.27%);
				box-shadow: 2px 16px 21px 0px rgba(35, 35, 35, 0.04);

				box-shadow: 1px 8px 17px 0px rgba(35, 35, 35, 0.04);

				margin-top: 40rpx;
				padding: 34rpx 54rpx;
				// background-image: $borderIcon;
				// background-repeat: no-repeat;
				// background-size: contain;
				// background-position: right top;

				.itemLeft {
					padding-right: 10rpx;
					position: relative;
					border-right: 2rpx dashed #666666;
					width: 170rpx;

					.topIcon {
						position: absolute;
						right: -16rpx;
						top: -50rpx;
						width: 32rpx;
						height: 32rpx;
						background: #FFFFFF;
						border-radius: 50%;
					}

					.bottomIcon {
						position: absolute;
						right: -16rpx;
						bottom: -50rpx;
						width: 32rpx;
						height: 32rpx;
						background: #FFFFFF;
						border-radius: 50%;
					}

					//.price {
					//  width: 100rpx;
					//}
					.unitBox {
						height: 70rpx;
					}

					.unit {
						color: #FFEBC4;
						font-size: 36rpx;
					}

					.priceValue {
						font-size: 52rpx;
						color: #FFEBC4;
					}
				}

				.topInfo {
					padding-bottom: 10rpx;
					margin-bottom: 10rpx;
				
					.couponDate {
						padding-top: 12rpx;
						width: 300rpx;
						color: rgba(255, 213, 171, 1);
						font-size: 28rpx;
					}
				
					.exchangeBtnBox {
						text-align: center;
				
						.exchangeBtn {
							border: 1px solid rgba(255, 255, 255, 1);
							padding: 9rpx 22rpx;
							border-radius: 16rpx;
						}
					}
				}
			}
		}

		.Put-box1 {
			.btn {
				text-align: center;
				margin-top: 40rpx;
				border: 2rpx solid #333333;
				height: 80upx;
				line-height: 80upx;
				width: 100%;
				color: #333333;
			}

			.submit {
				background-color: #333333;
				color: #FFEBC4;
				margin-left: 20rpx;
			}
		}
	}

	// 触底样式
	.reachBottom {
		margin-top: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.reach-icon {
			width: 150rpx;
			height: 150rpx;
		}

		.reach-text {
			margin: 20rpx 0;
			color: #CCCCCC;
		}
	}
</style>